<template>
  <input v-model.trim="data.value" v-on="listens" @input="filter" @focus="focus" @dblclick="dblclick" @blur="format" />
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted, PropType, toRef } from 'vue'
import { Widget } from '@/models'
import useNumberInput from './useNumberInput'

/** 数字控件 */
export default defineComponent({
  name: 'FaWidgetNumber',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 监听 */
    listens: {
      type: Object as PropType<Record<string, (...rest: any[]) => void>>
    }
  },

  setup(props) {
    const numberInput = useNumberInput(toRef(props, 'data'))

    onMounted(() => numberInput.format())

    return {
      ...numberInput,

      /** 使用时聚焦过滤 */
      focus(e: FocusEvent) {
        if (props.data.isUse) numberInput.filter()
      },

      /** 设置时双击启用编辑过滤 */
      async dblclick() {
        if (!props.data.isSet) return

        await nextTick()
        numberInput.filter()
      }
    }
  }
})
</script>
